<template>
    <div class="order-list" v-if="item">
        <div class="img">
            <img :src="imgUrl"/>
        </div>
        <div class="texts">
            <div class="detial">
                <div class="cname">
                    <p>{{item.cn}}</p>
                </div>
                <div class="mname">
                    <p>{{item.mn}}</p>
                </div>
                <div class="info">
                    <span>座位:</span>
                    <template v-for="ticket in item.ticket">
                        <div :key="ticket.row+Math.random()">
                            <span>{{ticket.row}}排{{ticket.column}}座</span>
                        </div>
                    </template>
                </div>
                <div class="time">
                    <span>开场:</span>
                    <span class="star">&nbsp;{{item.dt|filtime}}{{item.tm}}</span>
                </div>
                <div class="orderTime">
                    <span>下单时间:</span>
                    <span class="star">&nbsp;{{item.orderTime|filorder}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:{
        item:Object
    },
    computed:{
        imgUrl(){
            let sr=this.item.img;
            return sr.replace('w.h','65.90');
        },
    },
    filters:{
        filtime(time){
            let date=new Date(time);
            let nowYear=new Date().getFullYear();
            let y=date.getFullYear();
            let m=date.getMonth()+1;
            m=m>9?m:"0"+m;
            let d=date.getDate();
            d=d>9?d:"0"+d;
            if(y==nowYear){
                return m+'月'+d+"日";
            }else{
                return y+'年'+m+'月'+d+"日";
            }
        },
        filorder(time){
            let date=new Date(time);
            let nowYear=new Date().getFullYear();
            let y=date.getFullYear();
            let M=date.getMonth()+1;
            M=M>9?M:"0"+M;
            let d=date.getDate();
            d=d>9?d:"0"+d;
            let h=date.getHours();
            h=h>9?h:"0"+h;
            let m=date.getMinutes();
            m=m>9?m:"0"+m;
            let s=date.getSeconds();
            s=s>9?s:"0"+s;
            if(y==nowYear){
                return M+'-'+d+" "+h+":"+m+":"+s;
            }else{
                return y+'-'+M+'-'+d+"-"+" "+h+":"+m+":"+s;
            }
        }
    },
}
</script>

<style lang="less" scoped>
.order-list{
    display: flex;
    padding: 10px 0px 0px 10px;
    
    .img{
        width: 65px;

        img{
            width: 100%;
        }
    }

    .texts{
        flex: 1;
        height: 90px;
        margin-left: 7px;
        padding-bottom: 10px;
        padding-right: 10px;
        font-size: 13px;
        color: #666;
        display: flex;
        position: relative;
        align-items: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        &::after{
            content: "";
            width: 100%;
            position: absolute;
            left: 0;
            bottom: 0;
            border-bottom: 1px solid #f5f5f5;
        }

        .detial{
            flex: 1;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;

            .cname{
                font-size: 17px;
                font-weight: 600;
                display: flex;
                align-items: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .mname{
                font-size: 15px;
                font-weight: 600;
                display: flex;
                align-items: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .time,.info{
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }

            .info{
                display: flex;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;

                &::-webkit-scrollbar{
                    display: none;
                }

                div{
                    margin: 0 5px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}
</style>